<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<link rel="stylesheet" type="text/css" media="all" href="${pageContext.request.contextPath}/css/loading-fountain.css" />
<link rel="stylesheet" type="text/css" media="all" href="${pageContext.request.contextPath}/css/loading-wheel.css" />

<!--start 时间控件引入资源-->
<link rel="stylesheet" type="text/css" media="all" href="${pageContext.request.contextPath}/scripts/lib/bootstrap-daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/lib/bootstrap-daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/lib/bootstrap-daterangepicker/daterangepicker.js"></script>
<!--end 时间控件引入资源-->
<style>
	.page-header{
		margin: 30px 0 10px;
		border-bottom: 1px solid #ccc;
	}
</style>
 <section class="content">
 	<div class="container">
	<h2 class="page-header">1 树状数据选择器</h2>
	<div class="row">
		<button id="treeselect" type="button" class="btn btn-primary">demo</button>
	</div>
	<h2 class="page-header">2 字体图标</h2>
	<div class="row">
		<button id="ionicons" type="button" class="btn btn-primary">ionicons</button>
		<button id="fontawesome" type="button" class="btn btn-primary">fontawesome</button>
		<button id="glyphicons" type="button" class="btn btn-primary">glyphicons</button>
	</div>
	<h2 class="page-header">3 选择时间范围控件</h2>
	<div class="row">
		<div class="col-md-4">
			<input type="text" id="daterangepickerInput" name="dateRange" value="" class="form-control" placeholder="时间区间" style="width:340px; padding-left:28px" readonly="readonly">
		</div>
		<div class="col-md-4">
			<button id="openModalDaterangepicker" type="button" class="btn btn-primary">Modal date</button>
		</div>
		<div class="col-md-4"></div>
	</div>
	<h2 class="page-header">4  遮罩</h2>
	<div class="row">
		<button id="open-shadeLayer" type="button"  class="btn btn-primary">遮罩</button>
		<span style="margin:auto 10px;color:red">按 Esc键退出遮罩</span>
	</div>
	<h2 class="page-header">5  加载</h2>
	<div class="row">
		<button id="wheel-loading" type="button"  class="btn btn-primary">wheel loading</button>
		<button id="fountain-loading" type="button"  class="btn btn-primary">fountain loading</button>
		<button id="loading-close" type="button"  class="btn btn-default">close</button>
	</div>
	<h2 class="page-header">6  遮罩+加载</h2>
	<div class="row">
		<button id="shadelayer-loading" type="button"  class="btn btn-primary">遮罩+加载</button>
		<span style="margin:auto 10px;color:red">按 Esc键 关闭</span>
	</div>
	</div>
</section>
<script>
	$(function(){
		$("#treeselect").click(function(){
			dialog.formModal(ctxPath + '/pages/treeSelect/1.jsp','表单页');
		});

		$("#ionicons").click(function(){
			dialog.formModal(ctxPath + '/pages/fonticons/ionicons.html','ionicons',true,true,1200);
		});

		$("#fontawesome").click(function(){
			dialog.formModal(ctxPath + '/pages/fonticons/fontawesome.html','fontawesome',true,true,1250);
		});

		$("#glyphicons").click(function(){
			dialog.formModal(ctxPath + '/pages/fonticons/glyphicons.html','glyphicons',true,true,1200);
		});

		$("#openModalDaterangepicker").click(function(){
			dialog.formModal(ctxPath + '/pages/daterangepicker/1.html','modal上选日期');
		});

		$('#daterangepickerInput').daterangepicker({
		    "showDropdowns": true,
		    "timePicker": true,
		    "timePicker24Hour": true,
		    "timePickerSeconds": true,
		 	"ranges": {
		       '今日': [moment().startOf('day'), moment()],
               '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
               '最近7日': [moment().subtract('days', 7), moment()],
               '最近30日': [moment().subtract('days', 30), moment()]
		    },
		    "locale": {
		        "format": "YYYY/MM/DD HH:mm:ss",
		        "separator": " - ",
		        "applyLabel": "应用",
		        "cancelLabel": "取消",
		        "fromLabel": "从",
		        "toLabel": "到",
		        "customRangeLabel": "自定义",
		        "daysOfWeek": ['日', '一', '二', '三', '四', '五', '六'],
		        "monthNames": ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
		        "firstDay": 1
		    },
		    "linkedCalendars": false
		}, function(start, end, label) {
		});

		$("#open-shadeLayer").click(function(){
			thx.shadeLayer.show();
		});

		$(document).keydown(function(event){
			if(event.which==27){
				thx.shadeLayer.close();
				thx.loading.hide();
			}
		});

		$("#wheel-loading").click(function(){
			thx.loading.show("wheel");
		});

		$("#fountain-loading").click(function(){
			thx.loading.show("fountain");
		});

		$("#loading-close").click(function(){
			thx.loading.hide();
		});

		$("#shadelayer-loading").click(function(){
			thx.shadeLayer.show();
			thx.loading.show();//默认是fountain风格
		});
	});
</script>